<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="HousClose"></div>
      <div class="hous">
        <div class="rele-titles">
          <span :class="{title_color:jibeninfo === 1}" @click="changeTitle(1)">房源录入</span>
          <span :class="{title_color:jibeninfo === 2}" @click="changeTitle(2)">照片上传</span>
          <img @click="HousClose" src="../assets/img/tub.png" alt="">
          <!--<span class="pub-left">租</span>-->
        </div>
        <div class="warp">
        <div v-if="jibeninfo === 1">
          <div class="Entry">
            <ul class="hous-list">
              <!-- 小区 -->
              <li>
                <div class="pub-title"><span class="quar">小区</span></div>
                <div class="pub-w">
                  <div class="city">
                    <p>省份</p>
                    <p>城市</p>
                    <p>城区</p>
                    <p>位置</p>
                    <p>楼盘字典</p>
                    <p>分区</p>
                    <p>楼栋</p>
                    <p>单元</p>
                    <p>楼层</p>
                    <p>房号</p>
                    <p>总层</p>
                  </div>
                  <div class="city">
                    <!-- 省份 -->
                    <p>
                      <select v-model="formData.province_code" placeholder="请选择" @change="handelChangeRrovince" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in prov"
                          :key="item.CODE"

                          :value="item.CODE">
                          {{item.region_name_c}}
                        </option>
                      </select>
                    </p>
                    <!-- 省份 -->
                    <!-- 城市 -->
                    <p>
                      <select v-model="formData.city_code" placeholder="请选择" @change="handelChangeCity" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in city"
                          :key="item.CODE"
                          :label="item.region_name_c"
                          :value="item.CODE">
                        </option>
                      </select>
                    </p>
                    <!-- 城市 -->
                    <!-- 城区 -->
                    <p>
                      <select v-model="formData.area_code" placeholder="请选择" @change="handelChangeArea" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in proper"
                          :key="item.CODE"
                          :label="item.region_name_c"
                          :value="item.CODE">
                        </option>
                      </select>
                    </p>
                    <!-- 城区 -->
                    <p><input type="" name="" v-model="formData.position"  placeholder="请输入位置" style="width: 85%;height: 24px;margin-top: 1px;padding-left: 10px;"></p>

                    <!-- 楼盘 -->
                    <p>
                      <select v-model="formData.premises_id" placeholder="可搜索"  @change="handelChangeTowers" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in premises"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </option>
                      </select>
                    </p>
                    <!-- 楼盘 -->
                    <!-- 分区 -->
                    <p>
                      <select v-model="formData.partition_id" placeholder="请选择" @change="handelChangeZone" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in partition"
                          :key="item.id"

                          :value="item.id">
                          {{item.title}}
                        </option>
                      </select>
                    </p>
                    <!-- 分区 -->
                    <!-- 楼栋 -->
                    <p>
                      <select v-model="formData.building_id" placeholder="请选择" @change="handelChangeBuilding" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in buil"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </p>
                    <!-- 楼栋 -->
                    <!-- 单元 -->
                    <p>
                      <select v-model="formData.unit_id" placeholder="请选择" @change="handelChangeUnit" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in unit"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </p>
                    <!-- 单元 -->
                    <!-- 楼层 -->
                    <p>
                      <select v-model="formData.floor_id" placeholder="请选择" @change="handelChangeFloor" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in floor"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </p>
                    <!-- 楼层 -->
                    <!-- 房号 -->
                    <p>
                      <select v-model="formData.room_num_id" placeholder="请选择" style="width: 95%;height: 26px;">
                        <option
                          v-for="item in room"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </p>
                    <!-- 房号 -->
                    <p><input type="" name="" v-model="formData.all_floor" placeholder="请输入楼层" style="width: 95%;height: 24px;margin-top: 1px;padding-left: 10px;"></p>
                  </div>
                </div>
              </li>
              <!-- 小区 end-->
              <!-- 户型 -->
              <li>
                <div class="pub-title">户型</div>
                <div class="pub-w">
                  <ul class="layout">
                    <li>
                      <span>房</span>
                      <select v-model="formData.ht_room_num" placeholder="请选择"
                                 style="width:70%;float: left;    margin-right: 10px; height: 26px;">
                        <option v-for="(item,index) of optionsList" :key="index" :value="item">
                          {{item}}
                        </option>
                      </select>
                    </li>
                    <li>
                      <span>厅</span>
                      <select v-model="formData.ht_office_num" placeholder="请选择"
                                 style="width:70%;float: left;margin-right: 10px;height: 26px;">
                       <option v-for="(item,index) of optionsList" :key="index" :value="item">
                          {{item}}
                        </option>
                      </select>
                    </li>
                    <li>
                      <span>卫</span>
                      <select v-model="formData.ht_toilet_num" placeholder="请选择"
                                 style="width:70%;float: left;margin-right: 10px;height: 26px;">
                        <option v-for="(item,index) of optionsList" :key="index" :value="item">
                          {{item}}
                        </option>
                      </select>
                    </li>
                    <li>
                      <span>阳台</span>
                      <select v-model="formData.ht_balcony_num" placeholder="请选择"
                                 style="width:70%;float: left;margin-right: 10px;height: 26px;">
                       <option v-for="(item,index) of optionsList" :key="index" :value="item">
                          {{item}}
                        </option>
                      </select>
                    </li>
                    <li>
                      <span>车库</span>
                      <select v-model="formData.parking_lot" placeholder="请选择"
                                 style="width:70%;float: left;margin-right: 10px;height: 26px;">
                       <option v-for="(item,index) of optionsList" :key="index" :value="item">
                          {{item}}
                        </option>
                      </select>
                    </li>
                    <li v-show="formData.is_has_key === '1'">
                      <span>钥匙编号</span>
                      <input style=" width: 45%;height: 26px; margin-left:10px; border: 1px solid #a0a0a0;"  v-model="formData.key_code"placeholder="输入编号">
                    </li>
                  </ul>
                </div>
              </li>
              <!-- 户型 end-->
              <!-- 面积 -->
              <li>
                <div class="pub-title">面积</div>
                <div class="pub-w">
                  <ul class="layout">
                    <li>
                      <input type="" name="" v-model="formData.acreage" style="width:65%;height: 26px; border: 1px solid #a0a0a0;" placeholder="请输入面积"><span style="left: 18.5%;position: absolute;">㎡</span>
                    </li>
                    <li>
                      <span>朝向</span>
                      <select v-model="formData.orientation_id" placeholder="请选择"
                                 style="width:70%; float:left;margin-right:10px;height: 27px;" filterable>
                        <option
                          v-for="item in Downlist.orientation"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </li>
                    <li>
                      <span>类型</span>
                      <select v-model="formData.type_id" placeholder="请选择"
                                 style="width:70%; float:left;margin-right:10px;height: 27px;" filterable>
                        <option
                          v-for="item in Downlist.type"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </li>
                    <li>
                      <input type="" name="" v-model="formData.building_year" style="width: 45%;height: 26px;border: 1px solid #a0a0a0;" placeholder="请输入年代">&nbsp;<span>建房年代</span>
                    </li>
                    <li>
                      <span>是否为钥匙房源</span>
                      <select name="" id="" v-model="formData.is_has_key" style="height: 26px;">
                        <option value="0">不是</option>
                        <option value="1">是</option>
                      </select>
                    </li>
                  </ul>
                </div>
              </li>
              <!-- 面积 end-->
            </ul>
            <ul class="hous-list hous-list1">
              <!-- 交易 -->
              <li>
                <div class="pub-title">交易</div>
                <div class="pub-w">
                  <ul class="layout">
                    <li>
                      <select v-model="formData.transaction_id" placeholder="请选择"
                                 style="width:70%;height: 27px; float:left;margin-right:10px;" filterable>
                        <option
                          v-for="item in Downlist.transaction"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                      <span>交易</span>
                    </li>
                    <li>
                      <span>状态</span>
                      <select v-model="formData.status" placeholder="请选择"
                                 style="width:70%;height: 27px; float:left;margin-right:10px;" filterable>
                        <option
                          v-for="item in Downlist.status"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </li>

                    <li>
                      <input type="" name="" v-model="formData.property_cost" placeholder="请输入内容" style="width: 65%;height: 26px;border: 1px solid #a0a0a0;">
                      <span style="left: 48%; position: absolute">物业费</span>
                    </li>
                    <li>
                      <select v-model="Naturevalue" placeholder="请选择" style="width: 75%;height: 27px;">
                        <option v-for="item of nature" :key="item.id" :value="item.id">
                          {{item.title}}
                        </option>
                      </select><span style="left: 64%; position: absolute">性质</span>
                    </li>
                  </ul>

                </div>
              </li>
              <!-- 交易 end-->
              <!-- 售价 -->
              <li>
                <div class="pub-title">售总价</div>
                <div class="pub-w">
                  <ul class="layout">
                    <li>
                      <input type="" name="" v-model="formData.sell" style="width: 64%;height: 26px;border: 1px solid #a0a0a0;" placeholder="请输入内容"><span style="left: 18.5%; position: absolute">万元</span>
                    </li>
                    <li>
                      <input type="" name="" v-model="formData.sell_average" placeholder="元/㎡" style="width: 64%;height: 26px;border: 1px solid #a0a0a0;"><span style="left: 33.3%; position: absolute">售单价</span>
                    </li>
                    <li>
                      <input type="" name="" placeholder="元/月" v-model="formData.rent" style="width: 64%;height: 26px;border: 1px solid #a0a0a0;"><span  style="left: 48.5%; position: absolute">租价</span>
                      <!--<input type="" name="" placeholder="万元/年" v-model="formData.sell_min" style="width: 50px">-->
                    </li>
                    <li>
                      <input type="" name="" v-model="formData.sell_min_average" placeholder="元" style="width: 64%;height: 26px;border: 1px solid #a0a0a0;"><span style="left: 63.5%; position: absolute">押金</span>
                    </li>
                  </ul>
                  <!--//跟进方式-->
                  <div class="pub-w">
                    <ul class="layout" style="margin-top:10px">
                      <!--<li style="width:180px !important;">-->
                        <!--<select v-model="formDataValue.token"  placeholder="请选择" style="width:100px;float:left;height: 27px;">-->
                          <!--<option-->
                            <!--v-for="item in formDataVlaueList"-->
                            <!--:key="item.id"-->
                            <!--:label="item.title"-->
                            <!--:value="item.id">-->
                          <!--</option>-->
                        <!--</select>-->
                        <!--<span style="left: 18.5%; position: absolute" >跟进方式</span>-->
                      <!--</li>-->
                      <li style="width:180px !important;">
                        <input v-model="formData.owner_name" placeholder="请输入姓名" style="width:50%;float:left;height: 26px;border: 1px solid #a0a0a0;" >
                        <span style="width:60px;float:right;" >业主姓名</span>
                      </li>
                      <li style="width:170px !important;">
                        <input v-model="formData.owner_phone" placeholder="请输入联系方式" style="width: 50%;float:left;height: 26px;border: 1px solid #a0a0a0;" >
                        <span style="width:60px;float:right;" >业主电话</span>
                      </li>
                      <li style="width:200px !important; padding-left: 30px;">
                        <el-switch
                          v-model="formData.sort"
                          active-value="1"
                          inactive-value="0"
                          active-text="置顶"
                          inactive-text="不置顶">
                        </el-switch>
                      </li>
                    </ul>

                  </div>
                </div>
              </li>
              <li>
              </li>
              <!-- 现状 -->
              <div class="pub-right">
                <div class="right-li">
                  <div class="right-title">现状</div>
                  <div class="right-input">
                    <select v-model="formData.present_situation_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.situation"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">产权</div>
                  <div class="right-input">
                    <select v-model="formData.property_right_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.property_right"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">家电</div>
                  <div class="right-input">
                    <select v-model="formData.house_electric_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.house_electric"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">装修</div>
                  <div class="right-input">
                    <select v-model="formData.renovation_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.renovation"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">家具</div>
                  <div class="right-input">
                    <select v-model="formData.house_furnish_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.house_furnish"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">证件</div>
                  <div class="right-input">
                    <select v-model="formData.card_type_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.card_type"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">佣金</div>
                  <div class="right-input">
                    <select v-model="formData.commission_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.commission"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">看房</div>
                  <div class="right-input">
                    <select v-model="formData.look_house_id" placeholder="请选择"
                               style="width:90%;height: 27px; float:left;margin-right:10px;" filterable>
                      <option
                        v-for="item in Downlist.look_house"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">委托方式</div>
                  <div class="right-input">
                    <select v-model="formData.entrust_method" placeholder="请选择"
                               style="width:90%; float:left;margin-right:10px;height: 27px;" filterable>
                      <option
                        v-for="item in Downlist.entrust_method"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                      </option>
                    </select>
                  </div>
                </div>
                <div class="right-li">
                  <div class="right-title">委托时间</div>
                  <div class="right-input">
                    <el-date-picker style="width:90%;" v-model="formData.entrust_date"
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <!-- 现状 end-->
            </ul>
            <!-- 底部 -->
            <div class="footer">
              <ul class="hous-lists hous-list1">
                <!--<li>-->
                  <!--<div class="pub-title">跟进内容</div>-->
                  <!--<div class="pub-w">-->
                    <!--<ul class="layout">-->
                      <!--<li style="width:82%!important">-->
                        <!--<textarea v-model="formData.remark"></textarea>-->
                      <!--</li>-->
                    <!--</ul>-->
                  <!--</div>-->
                <!--</li>-->
                <li>
                  <div class="pub-title">房源概况</div>
                  <div class="pub-w">
                    <ul class="layout">
                      <li style="width:82%!important">
                        <textarea v-model="formData.survey"></textarea>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
              <div class="footer-right">
                <div class="footer-li">
                  <span>向系统推荐该房源</span>
                  <el-checkbox v-model="formData.is_recommend"></el-checkbox>
                </div>
                <div class="footer-li">
                  <span>发布到我的微店</span>
                  <el-checkbox v-model="formData.is_sent_shop"></el-checkbox>
                </div>
                <div class="footer-b">
                  <div class="footer-b-li">
                    <div class="footer-title">经纪人</div>
                    <div class="footer-input">
                      <input type="" name="" v-model="myuserinfo.name" disabled style="width: 70%;height: 26px; padding-left: 10px;">
                    </div>
                  </div>
                  <div class="footer-b-li">
                    <div class="footer-title">小组</div>
                    <div class="footer-input">
                      <input type="" name="" v-model="myuserinfo.department_group.title" disabled style="width: 70%;height: 26px; padding-left: 10px;">
                    </div>
                  </div>
                  <div class="footer-b-li">
                    <div class="footer-title">门店</div>
                    <div class="footer-input">
                      <input type="" name="" v-model="myuserinfo.department_store.title" disabled style="width: 70%;height: 26px; padding-left: 10px;">
                    </div>
                  </div>
                  <div class="footer-b-li">
                    <div class="footer-title">区域</div>
                    <div class="footer-input">
                      <input type="" name="" v-model="myuserinfo.department.title" disabled style="width: 70%;height: 26px; padding-left: 10px;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 底部 end-->
            <!--上传图片 -->

          </div>
          <div class="Follow">
            <!-- 上传视频 -->
            <!-- 上传视频 end-->
            <!--上传图片 end-->
            <div class="Upload">
              <!-- 按钮 -->
              <div class="footer-btn">
                <el-button type="primary">发短信给他</el-button>
                <el-button @click="submit" type="primary">提交该房源</el-button>
              </div>
              <!-- 按钮 end-->
            </div>
          </div>
        </div>
        <div v-else>
          <div>
            <div class="upload">
              <!--<img src="../assets/img/home.png" alt="">-->
              <div class="upload_">
                <button :class="{img_color:changeImg === index}" v-for="(item,index) in typeTitle" @click="changeImage(index)" style="margin-left: 20px;border-radius: 5px;width: 50px;height: 30px;">{{item.title}}</button>
              </div>
              <h2>请选择类型后再上传图片</h2>
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://kf.wuyoufang.cn/index/house_file"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="testImg"
                  accept="*"
                  :data="file_data"
                  :headers="headers"
                  :auto-upload="false" multiple>
                  <el-button slot="trigger" size="small" type="primary" style="margin-left: 20px;">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过100M</div>-->
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  // import Modal from './modal';
  export default {
    components: {
      // Modal
    },
    props: {
      LDmodal: {
        type: Function
      },
      HousClose: {
        type: Function
      }
    },
    data() {
      return {
        formData:{
          sort:false,
        },
        getNotice:{
          type:Function
        },
        optionsList:10, //下拉数据
        // formDataVlaueList:[],
        changeImg:0,
        typeTitle: [
          {title:'照片'},
          // {title:'缩略图'},
          {title:'视频'}
        ],
        // headers:{token:'666'},
        file_data:{
          file_index:'',
          type_id:0
        },
        croppa5: {
          name:'',
          type:0,
          file_index:'',
        },
        jibeninfo: 1,
        myuserinfo: {
          department: '',
          department_group: '',
          department_store: ''
        },//个人信息
        isdisplay: true,
        isdisplays: false,
        Modalshow: false,
        Naturevalue: '',

        // 性质
        nature:[
          {
            title:"私盘",
            id:0
          },
          {
            title:"公盘",
            id:1
          }
        ],
        // //跟进方式
        // formDataValue:{
        //   token:""
        // },

        // 下拉
        transaction:'',
        Downlist: {},
        Followshow: false,
        Entryshow: true,
        partition: [],
        room: '',
        checked: true,
        floor: [],
        buil: [],
        premises: '',
        unit: [],
        proper: [],
        id: '',
        // 照片上传
        dialogImageUrl: '',
        dialogVisible: false,
        // 省份
        prov: [],
        city: [],
        // formDataValue:'',
        // formDataValueList:[],
        formData: {
          file_index: '',
          is_has_key: '0'
        }       //保存的表单数据
      };
    },

    methods: {
      changeImage(i){
        this.changeImg = i;
        this.$refs.upload.clearFiles();
      },
      submitUpload() {
        this.file_data.file_index = this.formData.file_index;
        this.file_data.type_id = this.changeImg + 1;
        // this.headers.token = localStorage.token;
        this.croppa5.file_index = this.formData.file_index;
        this.croppa5.type = this.changeImg + 1;

        this.$refs.upload.submit();
      },
// 切换样式
      changeTitle(id) {
        this.jibeninfo = id;
        this.$refs.upload.clearFiles();
      },

      //房源跟进
      Follow() {
        this.isdisplay = false;
        this.isdisplays = true;
        this.Followshow = true;
        this.Entryshow = false;
      },
      // 房源录入
      Entry() {
        this.isdisplay = true;
        this.isdisplays = false;
        this.Entryshow = true;
        this.Followshow = false;
      },
      //获取跟进内容
      //获取跟进内容
      // getformData(){
      //   let _this = this;
      //   //获取跟进列表
      //   this.$http.post('/index/house_up/mode').then((res)=>{
      //
      //     _this.formDataVlaueList= res.data;
      //   });
      //
      // },
      // 设置下拉列表
      SetDownList() {
        let that = this;
        that.$http.get('/index/house/save_select_item').then(function(res) {
          that.Downlist = res.data;
          that.formData.file_index = res.data.file_index;
        }).catch(function(err) {
        });
      },

      // 提交房源
      submit() {

        let that = this;
        that.formData.economic_man = that.myuserinfo.id;
        that.formData.e_group_id = that.myuserinfo.department_group.id;
        that.formData.e_shop_id = that.myuserinfo.department_store.id;
        that.formData.e_area_code = that.myuserinfo.department.id;
        that.formData.is_sent_shop = that.formData.is_sent_shop?1:0
        that.$http.post('/index/house', that.formData).then(function(res) {
          if (res.data.status === 1) {
            that.HousClose();
            that.formData = {};
            that.SetDownList();
            that.getNotice();
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          } else {
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          }
        }).catch(function(err) {
          console.log(err);
        });
      },


      /**省市县区数据获取 */

      /**获取省的数据   外部会调用  */
      handelGetRrovince(){
        let _this = this;
        this.$http.get('/newapi/Area/getAreaRegion', {params: {country_code: "CN",}})
          .then(function ({data}){
            _this.prov = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //省级数据change事件
      handelChangeRrovince(){

        //发生改变时会调用城市数据的方法

        this.city = []; //城市数据
        this.proper = []; //城区数据为空
        this.premises = []; //楼盘数据为空
        this.partition = []; //分区数据为空
        this.buil = []; //楼栋数据为空
        this.unit = []; //单元数据为空
        this.floor = []; //楼层数据为空
        this.room = []; //房号数据为空
        this.handelGetCity();
      },

      //获得城市数据
      handelGetCity(){
        let _this = this;
        this.$http.get('/newapi/Area/getAreaRegion', {
          params:{
            country_code: "CN",
            upper_region:_this.formData.province_code
          }
        })
          .then(function ({data}) {
            _this.city = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //获取城市数据的change事件
      handelChangeCity(){
        this.proper = []; //城区数据为空
        this.premises = []; //楼盘数据为空
        this.partition = []; //分区数据为空
        this.buil = []; //楼栋数据为空
        this.unit = []; //单元数据为空
        this.floor = []; //楼层数据为空
        this.room = []; //房号数据为空


        //数据发生改变时调用城区数据
        this.handelGetArea();
      },


      //获得城区数据
      handelGetArea(){
         let _this = this;
          this.$http.get('/newapi/Area/getAreaRegion', {
              params: {
                country_code: "CN",
                upper_region: _this.formData.city_code
              }
          })
            .then(function ({data}) {
              _this.proper = data.res;
            })
            .catch(function (err) {
              console.log(err);
            })
      },

      //城区的change的事件
      handelChangeArea(){
        this.premises = []; //楼盘数据为空
        this.partition = []; //分区数据为空
        this.buil = []; //楼栋数据为空
        this.unit = []; //单元数据为空
        this.floor = []; //楼层数据为空
        this.room = []; //房号数据为空

        //改变时调用获取楼盘函数
        this.handelGetTowers();
      },

      //获取楼盘数据
      handelGetTowers(){
        let _this = this;
        _this.$http.get('/index/premises/search',{
          params:{
            area_code:_this.formData.area_code
          }
        })
          .then(function (res){
             _this.premises =  res.data;
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //楼盘change事件
      handelChangeTowers(){
        this.partition = []; //分区数据为空
        this.buil = []; //楼栋数据为空
        this.unit = []; //单元数据为空
        this.floor = []; //楼层数据为空
        this.room = []; //房号数据为空

        //调用分区数据
        this.handelGetZone();
      },

       //获取分区数据
      handelGetZone(){
        let _this = this;
        this.$http.get('/newapi/Premisespartition/getdong',{
          params:{
            premises_id:_this.formData.premises_id
          }
        }).then((res)=>{
          _this.partition = res.data.res;


        }).catch((err)=>{
          console.log(err);
        })
      },

      //分区change事件
      handelChangeZone(){
        this.buil = []; //楼栋数据为空
        this.unit = []; //单元数据为空
        this.floor = []; //楼层数据为空
        this.room = []; //房号数据为空


        //数据改变时调用楼栋数据函数
         this.handelGetBuilding();
      },
      //获得楼栋数据
      handelGetBuilding(){

        let _this = this;
        _this.$http.get('/newapi/Premisesbuilding/getdong',{
          params:{
            premisespartition_id:_this.formData.partition_id
          }
        }).then(({data})=>{
            _this.buil = data.res;

        })
      },
      //楼栋change事件
      handelChangeBuilding(){

          this.unit = []; //单元数据为空
          this.floor = []; //楼层数据为空
          this.room = []; //房号数据为空
          //调用单元数据
          this.handelGetUnit();
      },

      //获取单元数据
      handelGetUnit(){
        let _this = this;
        _this.$http.get('/newapi/Premisesunit/getdanyuan', {params: {premisesbuilding_id: _this.formData.building_id}})
          .then(function ({data}) {
            _this.unit = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //单元change事件
      handelChangeUnit(){

         this.floor = []; //楼层数据为空
         this.room = []; //房号数据为空

        //调用获取楼层事件
        this.handelGetFloor();
      },

      //获取楼层数据
      handelGetFloor(){
        let _this = this;
        _this.$http.get('/newapi/Premisesfloor/getlouceng', {params: {premisesunit_id: _this.formData.unit_id}})
          .then(function ({data}){
            _this.floor = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //楼层change事件
      handelChangeFloor(){
         this.room = []; //房号数据为空
        //调用获取房号
        this.handelGetRoom();
      },

      //获得房号数据
      handelGetRoom(){
        let _this = this;
        this.$http.get('/newapi/Premisesfloor/getlouceng', {params: {premisesunit_id: _this.formData.floor_id}})
          .then(function ({data}){
            _this.room = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      /**省市县区数据获取结束 */
    },
    mounted() {

      this.SetDownList();
      // 设置省下拉列表
      let that = this;
      //获取个人信息
      that.$http.get('/newapi/User/index').then(res => {
        that.myuserinfo = res.data;

      }).catch(err => {
        console.log(err);
      });

      //获取跟进方式
      // this.getformData();
    }
  };
</script>
<style scoped>

  .warp{
    height:450px;
    overflow: hidden;
    overflow-y: scroll;
  }

  .rele-title > span:last-child {
    float: right;
  }

  .footer-btn button {
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
  }

  .footer-btn button:nth-child(1) {
    margin-right: 10px;
  }

  .footer-btn {
    margin-top: 4px;
    width: 97%;
    float: left;
    padding-left: 40%;
  }

  .footer-btn:nth-child(2) {
    float: right;
  }

  .video {
    width: 15%;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #eee
  }

  .Upload-left {
    width: 15%;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #eee
  }

  .Upload {
    width: 98%;
    float: left;
    padding: 1%;
    background: #fff;
    margin-top: 5px;
  }

  .footer-input {
    width: 70%;
    float: left;
  }

  .footer-input input {
    width: 70%;
    height: 27px;
    float: left;
    margin-left: 5%;
    border: 1px solid #d3d3d3;
  }

  .footer-title {
    width: 30%;
    float: left;
  }

  .footer-b-li {
    width: 50%;
    margin-top: 20px;
    float: left;
  }

  .footer-b {
    margin-top: 20px;
  }

  .footer-li span {
    margin-right: 10px;
    line-height: 27px;
    display: inline-block;
  }

  .footer-li {
    width: 50%;
    float: left;
  }

  .layout li textarea {
    width: 80%;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
  }

  .footer {
    width: 100%;
    float: left;
    position: relative;
    margin-top: 5px;
    background: #fff
  }

  .footer-right {
    width: 30%;
    position: absolute;
    right: 0;
  }

  .right-input {
    width: 67%;
    float: left;
  }

  .right-input input {
    width: 85%;
    height: 27px;
    float: left;
    margin-left: 5%;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
  }

  .right-title {
    width: 33%;
    line-height: 27px;
    float: left;
  }

  .pub-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32%;
    padding-left: 1%;
    float: right;
    box-sizing: border-box;
    border-left: 5px solid #f9f9f9;
  }

  .right-li {
    width: 50%;
    margin-top: 15px;
    float: left;
  }

  .hous-list1 {
    margin-top: 5px;
    position: relative;
  }

  .layout {
    width: 100%;
    float: left;
  }

  .layout li {
    width: 16.666666667% !important;
    float: left;
    line-height: 27px;
    text-align: left;
    margin-top: 0 !important;
  }

  .layout li input {
    width: 58%;
    float: left;
    padding-left: 5%;
    font-size: .9em;
    margin-right: 10px;
    height: 27px;
    border: 1px solid #d3d3d3;
  }

  .quar {
    margin-top: 27px;
    display: inline-block;
  }

  .city p input {
    width: 100%;
    float: left;
    /*height: 25px;*/
    border: 1px solid #a0a0a0;
  }

  .city {
    width: 100%;
    float: left;
  }

  .city p {
    font-weight: bold;
    line-height: 27px;
    width: 9.0909090909%;
    float: left;
    text-align: center;
  }

  .pub-w {
    width: 90%;
    float: left;
    margin-top: 20px;
    padding-right: 3%;
  }

  .pub-title {
    width: 7%;
    line-height: 27px;
    font-weight: bold;
    float: left;
    text-align: center;
  }

  .hous-list {
    width: 100%;
    float: left;
    background: #fff;
    padding-bottom: 10px;
    text-align: center;
  }

  .hous-lists {
    width: 100%;
    float: left;
    background: #fff;
    padding-bottom: 10px;
    text-align: center;
  }

  .hous-list li {
    margin-top: 20px;
    width: 100%;
    float: left;
  }
  .hous {
    background: #f9f9f9;
    width:1000px;
    left:50%;
    margin-left:-500px;
    box-shadow: #e8e7e7 0px 0px 10px;
    position: absolute;
    z-index: 10;
    height: 500px;
    top:100px;
    overflow: hidden;
  }

  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  .rele-titles {
    width:100%;
    padding: 0 1%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    height:50px;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    position: relative;

  }
   .title_color{
     background: #fff;
     color: #415dba;
   }
  .rele-titles img{
    position: absolute;
    right:35px;
    top:15px;
    cursor: pointer;
    border-radius: 10px;
  }
  .rele-titles span{
    cursor:pointer;
  }
  h2{
    margin-left: 20px;
  }
  .upload_{
    margin-top: 5%;
  }

  .modal{
    position: fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    z-index:1000;
  }
  select{
    cursor: pointer;
  }
  input{
    cursor: pointer;
  }
  textarea{
    padding-left: 10px;
    cursor: pointer;
  }
</style>
